<template>
  <div>
    <div id="map" style="width: 100vw; height: 100vh"></div>
  </div>
</template>

<script>
import { default as proj4 } from "proj4";
import * as Cesium from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import mapData from "../assets/data/R_MAIN.json";

let viewer;

export default {
  name: "cesium",
  data() {},
  methods: {
    initMap() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2ZTgxOGNhZC03NThmLTQ0NzMtOTNlYS1kNmM3YzlmZDU3NTMiLCJpZCI6MTI1NTY3LCJpYXQiOjE2NzY5MDI0MzJ9.ulIEz3NCh2cMEBiHrqIuv9I6icn5KTMMnBdy2wassoM";
      viewer = new Cesium.Viewer("map", {
        // 配置项
        infoBox: false,
        animation: false, // 禁用动画控件
        timeline: false, // 禁用时间线控件
        homeButton: false, // 禁用Home按钮
        sceneModePicker: false, // 禁用场景模式选择器
        baseLayerPicker: false, // 禁用图层选择器
        navigationHelpButton: false, // 禁用帮助按钮
        fullscreenButton: false, // 禁用全屏按钮
        geocoder: false, // 禁用搜索框
        requestRenderMode: true, // 显示渲染
        maximumRenderTimeChange: 1.0,
        navigation: false,
      });

      let imageryLayers = viewer.imageryLayers;
      // 移出Cesium底图
      imageryLayers.removeAll();
      // 添加天地图
      let imagery = imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f69df935f2b4e5d06629d91c56be2809",
          format: "image/png",
          layer: "",
          style: "",
          tileMatrixSetID: "",
        })
      );
      imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
          url: "http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f69df935f2b4e5d06629d91c56be2809",
          format: "image/png",
          layer: "",
          style: "",
          tileMatrixSetID: "",
        })
      );

      viewer.scene.globe.baseColor = new Cesium.Color(
        15 / 255,
        33 / 255,
        47 / 255
      );
      imagery.contrast = -1.5;
      imagery.alpha = 0.2;
    },
    tranformCoordinate() {
      Cesium.GeoJsonDataSource.crsNames["urn:ogc:def:crs:EPSG::2326"] =
        Cesium.GeoJsonDataSource.crsNames["EPSG::2326"] = (coordinates) => {
          const fromProjection = `PROJCS["Hong Kong 1980 Grid System",GEOGCS["Hong Kong 1980",DATUM["Hong_Kong_1980",SPHEROID["International 1924",6378388,297],TOWGS84[-162.619,-276.959,-161.764,-0.067753,2.243648,1.158828,-1.094246]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4611"]],PROJECTION["Transverse_Mercator"],PARAMETER["latitude_of_origin",22.3121333333333],PARAMETER["central_meridian",114.178555555556],PARAMETER["scale_factor",1],PARAMETER["false_easting",836694.05],PARAMETER["false_northing",819069.8],UNIT["metre",1,AUTHORITY["EPSG","9001"]],AUTHORITY["EPSG","2326"]]`;

          const toProjection = `GEOGCS["WGS 84",DATUM["WGS_1984",SPHEROID["WGS 84",6378137,298.257223563,AUTHORITY["EPSG","7030"]],AUTHORITY["EPSG","6326"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4326"]]`;

          const x = coordinates[0];
          const y = coordinates[1];

          const newCoordinates = proj4(fromProjection, toProjection, [x, y]);
          return Cesium.Cartesian3.fromDegrees(
            newCoordinates[0],
            newCoordinates[1],
            0
          );
        };
    },
    addGeoJson(url) {
      let that = this;
      var dataSource = new Cesium.GeoJsonDataSource();
      dataSource
        .load(url, {
          stroke: new Cesium.Color.fromBytes(97, 137, 154),
          fill: new Cesium.Color(49 / 255, 70 / 255, 87 / 255, 0.5),
        })
        .then(function () {
          viewer.dataSources.add(dataSource);
          viewer.zoomTo(dataSource);
        });
    },
  },
  mounted() {
    this.initMap();
    // this.tranformCoordinate();
    this.addGeoJson("./儋州.geojson");
  },
};
</script>
